<template>
  <div class="GykjMap-waterLoggingCity">

    <div class="GykjMap-waterLoggingCity-info">
      <div class="name">
        <span class="key">站点名称：</span>
        <span>{{fliterData('stn_name')}}</span>
      </div>
      <div class="address">
        <span class="key">站点地址：</span>
        <span>{{fliterData('location')}}</span>
      </div>
      <div class="waterlevel">
        <span class="key">即时水位(m)：</span>
        <span>{{fliterData('water_level')}}</span>
      </div>
      <div class="time">
        <span class="key">数据时间：</span>
        <span>{{fliterData('data_time')}}</span>
      </div>
    </div>

    <div class="GykjMap-waterLoggingCity-echart">
      <div class="GykjMap-waterLoggingCity-nodata" v-show="!showEchart"></div>
      <div class="echart" v-show="showEchart" ref="echart"></div>
      <div class="time">
        <DatePicker
          v-model="startTime"
          type="date"
          placement="top-start"
          placeholder="日期"
          style="width: 190px"></DatePicker>
        <span>至</span>
        <DatePicker
          v-model="endTime"
          type="date"
          placement="top-start"
          placeholder="日期"
          style="width: 190px"></DatePicker>
        <Button type="primary" @click="searchTime">查询</Button>
      </div>
    </div>

    <div class="GykjMap-waterLoggingCity-video" v-if="resultData.video_path">
      <div class="GykjMap-waterLoggingCity-noVideo" v-show="!data.video_path"></div>
      <iframe v-show="data.video_path" :src="data.video_path" width="100%" height="100%"></iframe>
    </div>

    <div class="GykjMap-waterLoggingCity-imgs" v-else>
      <div class="GykjMap-waterLoggingCity-noPicture" v-show="!showPicture"></div>
      <div class="GykjMap-waterLoggingCity-picture" v-show="showPicture">
        <img :src="pictureUrl" @dblclick="scaleImg" />
        <div class="prev" @click="prev">
          <Button type="primary" shape="circle" icon="chevron-left"></Button>
        </div>
        <div class="next" @click="next">
          <Button type="primary" shape="circle" icon="chevron-right"></Button>
        </div>
      </div>
    </div>

    <div class="GykjMap-waterLoggingCity-rule">
      <div class="rule">
        <img src="./img/waterRule.png" alt="">
      </div>
      <div class="water" :style="{top: waterLevel}"></div>
      <div class="waterLevel">即时水位(m)：{{fliterData('water_level')}}</div>
    </div>

    <transition name="animate-mask">
      <div class="GykjMap-waterLoggingCity-scaleImg" @click="closeScaleImg" v-show="isScaleImg">
        <div class="close" @click.stop="closeScaleImg">
          <Icon type="close-round" size="30"></Icon>
        </div>
        <div class="time" @click.stop>
          {{pictureTime}}
        </div>
        <div class="img" @click.stop>
          <img :src="pictureUrl" />
        </div>
        <div class="action-prev" @click.stop="prev">
          <Icon type="chevron-left"></Icon>
        </div>
        <div class="action-next" @click.stop="next">
          <Icon type="chevron-right"></Icon>
        </div>
      </div>
    </transition>

    <Loading v-show="loading" />
  </div>
</template>

<script>
import Loading from '../../public/loading/loading'
import axios from 'axios'
import echarts from 'echarts'
import * as Common from '../../common'

const echartExample = (data) => ({
  title: {
    text: '实时水深趋势',
    textStyle: {
      color: '#495060'
    },
    x: 'center',
    top: 10
  },
  grid: {
    top: '17%',
    left: '10%',
    right: '5%',
    bottom: '15%'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    },
    padding: 8,
    textStyle: {
      fontSize: 12,
      lineHeight: 26
    },
    backgroundColor: 'rgba(0,0,0,0.5)'
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: false,
      lineStyle: {
        color: 'rgb(160, 160, 160)'
      }
    },
    axisLabel: {
      formatter: '{value}m',
      margin: 10,
      textStyle: {
        fontSize: 12,
        color: '#495060'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgb(160, 160, 160)'
      }
    },
    splitLabel: {
      show: true
    }
  },
  xAxis: {
    axisLine: {
      lineStyle: {
        color: '#495060'
      }
    },
    axisLabel: {
      margin: 10,
      textStyle: {
        fontSize: 12,
        color: '#495060'
      }
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: '#495060'
      }
    },
    splitLabel: {
      show: true
    },
    data: data.x
  },
  series: [{
    name: '水深',
    smooth: true,
    type: 'line',
    symbol: 'emptyCircle',
    symbolSize: 5,
    itemStyle: {
      normal: {
        color: '#03afff'
      }

    },
    lineStyle: {
      normal: {
        color: '#03afff',
        width: 2
      }
    },
    data: data.outer
  }]
})

export default {
  props: {
    stnNo: {
      type: String,
      default: ''
    },
    source: {
      type: String,
      default: ''
    },
    isInit: {
      type: Boolean,
      default: true
    }
  },
  components: {
    Loading
  },
  created () {
    this.echart = null
  },
  mounted () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {},
      pictureUrl: '',
      pictureTime: '',
      startTime: '',
      endTime: '',
      waterLevel: '222',
      loading: false,
      showEchart: false,
      showPicture: false,
      isScaleImg: false,
      showVideo: false
    }
  },
  methods: {
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    },
    searchTime () {
      let time
      if (this.startTime && this.endTime) {
        const startTime = Common._timeFilter(new Date(this.startTime), 'yyyy-MM-dd HH:mm:ss')
        const endTime = Common._timeFilter(new Date(this.endTime), 'yyyy-MM-dd HH:mm:ss')
        time = `${startTime}|${endTime}`
      } else {
        this.startTime = ''
        this.endTime = ''
      }
      this.showEchart = false
      this.showPicture = false
      this.getData({ time })
    },
    prev () {
      if (this.activeImgIndex <= 0) {
        return
      }
      this.activeImgIndex--
      this.pictureUrl = this.images[this.activeImgIndex].data_txt
      this.pictureTime = this.images[this.activeImgIndex].data_time
    },
    next () {
      if (this.activeImgIndex >= this.images.length - 1) {
        return
      }
      this.activeImgIndex++
      this.pictureUrl = this.images[this.activeImgIndex].data_txt
      this.pictureTime = this.images[this.activeImgIndex].data_time
    },
    scaleImg () {
      this.isScaleImg = true
    },
    closeScaleImg () {
      this.isScaleImg = false
    },
    initEchart (data) {
      if (!data) {
        return
      }
      this.showEchart = true
      setTimeout(() => {
        if (!this.echart) {
          this.echart = echarts.init(this.$refs.echart)
        }
        this.echart.setOption(echartExample(data, '水深'))
      }, 20)
    },
    initData (stnNo, data = {}) {
      this.resultData = data
      this.showEchart = false
      this.showPicture = false
      this.waterLevel = '222'
      this.startTime = ''
      this.endTime = ''
      this.api = 'http://183.238.82.216:9080/fullservice/http/waterlevelDataReal'

      if (stnNo) {
        this.api += `?stn_no=${stnNo}`
      } else {
        if (this.source) {
          this.api = this.source
        } else if (!this.source && this.stnNo) {
          this.api += `?stn_no=${this.stnNo}`
        } else {
          return
          // throw new Error('必须传入api源地址或内涝站编号')
        }
      }

      this.getData()
    },
    getData (options = {}) {
      this.loading = true

      const { time } = options

      axios.get(this.api, {
        params: {
          data_time: time
        }
      })
        .then(response => {
          this.loading = false
          const res = response.data

          if (res.code === '0000') {
            let data = null
            let info = res.result.data.reverse()
            let image = res.result.image
            if (info.length) {
              Object.assign(this.resultData, {
                water_level: info[info.length - 1].water_level,
                data_time: info[info.length - 1].data_time
              })

              this.waterLevel = `${(222 - this.resultData.water_level * 10 / 16 * 222)}px`

              let time = []
              let outer = []
              info.map(item => {
                let str = item.data_time
                str = str.split(' ').join('\n')
                time.push(str)
                outer.push(item.water_level)
              })
              data = {
                x: time,
                outer: outer,
                isAlertLine: true,
                alarm_l1: info[info.length - 1].alarm_l1,
                alarm_l2: info[info.length - 1].alarm_l2
              }
            }

            this.activeImgIndex = 0
            this.images = []
            if (image.length && image[this.activeImgIndex].data_type === '图片') {
              this.showPicture = true
              this.pictureUrl = image[this.activeImgIndex].data_txt
              this.pictureTime = image[this.activeImgIndex].data_time
              this.images = image
            }

            this.initEchart(data)
          } else {
            this.$emit('data_err', '找不到该内涝点的实时数据')
            console.log('找不到该内涝点的实时数据')
          }
        })
        .catch(err => {
          this.loading = false
          this.$emit('data_err', `获取该数据源失败，错误代码：${err}`)
          console.log(`获取该数据源失败，错误代码：${err}`)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-waterLoggingCity {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .GykjMap-waterLoggingCity-info {
    width: 480px;
    height: 96px;
    border: 1px solid rgb(160, 160, 160);
    position: absolute;
    left: 5px;
    top: 5px;
    padding: 5px;
    font-size: 14px;
    .key {
      color: #008cee;
    }
  }
  .GykjMap-waterLoggingCity-echart {
    width: 480px;
    position: absolute;
    left: 5px;
    top: 106px;
    bottom: 5px;
    border: 1px solid rgb(160, 160, 160);
    > .echart {
      width: 100%;
      height: calc(100% - 35px);
      overflow: hidden;
    }
    .time {
      padding-left: 5px;
    }
    .GykjMap-waterLoggingCity-nodata {
      width: 100%;
      height: calc(100% - 35px);
      text-align: center;
      background-image: url("./img/noCount.png");
      background-position: center 35%;
      background-repeat: no-repeat;
    }
  }
  .GykjMap-waterLoggingCity-video {
    width: 310px;
    height: calc(50% - 10px);
    position: absolute;
    right: 5px;
    top: 5px;
    border: 1px solid rgb(160, 160, 160);
    iframe {
      border: none;
    }
    .GykjMap-waterLoggingCity-noVideo {
      width: 100%;
      height: 100%;
      text-align: center;
      background-image: url("./img/noVideo.jpg");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
  .GykjMap-waterLoggingCity-imgs {
    width: 310px;
    height: calc(50% - 10px);
    position: absolute;
    right: 5px;
    top: 5px;
    border: 1px solid rgb(160, 160, 160);
    .GykjMap-waterLoggingCity-picture {
      width: 100%;
      height: 100%;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      > .prev, > .next {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 0;
      }
      > .prev {
        left: 20px;
      }
      > .next {
        right: 20px;
      }
    }
    .GykjMap-waterLoggingCity-noPicture {
      width: 100%;
      height: 100%;
      text-align: center;
      background-image: url("./img/noPicture.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
  .GykjMap-waterLoggingCity-rule {
    width: 310px;
    height: calc(50% - 5px);
    position: absolute;
    right: 5px;
    top: 50%;
    border: 1px solid rgb(160, 160, 160);
    overflow: hidden;
    > .rule {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      > img {
        height: 100%;
      }
    }
    > .water {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 222px;
      left: 0;
      background-color: rgba(162, 236, 255, .5);
    }
    > .waterLevel {
      width: 100%;
      text-align: center;
      position: absolute;
      top: 200px;
    }
  }
  .GykjMap-waterLoggingCity-scaleImg {
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    > .close {
      position: absolute;
      right: 50px;
      top: 50px;
      color: white;
      cursor: pointer;
      &:hover {
        color: #ddd;
      }
    }
    > .time {
      width: 100%;
      text-align: center;
      color: white;
      font-size: 30px;
      position: absolute;
      top: 20px;
      left: 0;
    }
    > .img {
      width: 80%;
      height: 80%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      > img{
        width: 100%;
        height: 100%;
      }
    }
    > .action-prev, > .action-next {
      height: 80px;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;
      font-size: 80px;
      cursor: pointer;
      color: white;
      &:hover {
        color: #ddd;
      }
    }
    > .action-prev {
      left: 40px;
    }
    > .action-next {
      right: 40px;
    }
  }
}
</style>
